<template>
	<view v-if="isShow" class="popup-list-container" :class="{ active: props.value }">
		<v-overlay v-model:value="props.value" :z-index="8" @click="handleClose"></v-overlay>
		<view :class="['popup-list', `popup-list--border--${model}`]">
			<view class="popup-header">
				<slot name="title-header">
					<view class="popup-title">{{ title }}</view>
					<view class="popup-close" @click.stop="handleClose">取消</view>
				</slot>
			</view>
			<view class="popup-content">
				<scroll-view class="popup-scroll" scroll-y :style="{ height: scrollHeight + 'rpx' }">
					<slot></slot>
				</scroll-view>
			</view>
			<view class="popup-footer">
				<slot name="buttons-footer">
					<v-button class="popup-confirm" @click="handleConfirm" model="circle">确定</v-button>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, watch, inject } from 'vue';

/**
 * v-popup 弹窗
 * show 		是否显示弹窗 默认值:false  可选值true显示、false隐藏
 * title 		弹窗标题
 * scrollHeight 滚动区域高度 默认值:400
 * model		模式	默认值:square	可选值:semicircle半圆、square方形
 */
const props = defineProps({
	value: {
		type: Boolean,
		default: false,
		required: true
	},
	title: {
		type: String,
		default: ''
	},
	scrollHeight: {
		type: Number,
		default: 400
	},
	model: {
		type: String,
		default: 'square'
	}
});

const emit = defineEmits(['update:value', 'close', 'confirm']);
const config = inject<any>('config');
const isShow = ref(props.value);

watch(
	() => props.value,
	(newVal) => {
		isShow.value = newVal;
	}
);

function handleClose() {
	isShow.value = false;
	emit('update:value', false);
	emit('close', false);
}

function handleConfirm() {
	isShow.value = false;
	emit('update:value', false);
	emit('confirm', false);
}
</script>
<style lang="scss">
.popup-list-container {
	position: relative;
	width: 100%;
	height: 100%;
}
.popup-list {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: v-bind('config.backgroundColor.reversal');
	overflow: hidden;
	transform: translateY(100%);
	transition: transform 0.5s ease;
	z-index: 10;

	&--border--square {
		border-radius: 0;
	}
	&--border--semicircle {
		border-radius: 15rpx;
	}
}

.popup-list-container.active {
	.popup-list {
		transform: translateY(0);
	}
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: v-bind('config.backgroundColor.reversal');
	border-bottom: 1rpx solid v-bind('config.border.color');
}

.popup-title {
	font-size: v-bind('config.fontSize.smallTitle');
	font-weight: 500;
	color: v-bind('config.fontColor.mianTitle');
}

.popup-close {
	font-size: v-bind('config.fontSize.mediumText');
	color: v-bind('config.fontColor.mainText');
}

.popup-content {
	max-height: 500rpx;
	overflow: hidden;
}

.popup-scroll {
	height: 100%;
}

.popup-footer {
	display: flex;
	justify-content: flex-end;
	padding: 20rpx 30rpx;
	background-color: v-bind('config.backgroundColor.reversal');
	border-top: 1rpx solid v-bind('config.border.color');
	min-height: 125rpx;
}

.popup-confirm {
	width: 160rpx;
	height: 60rpx;
}
</style>
